<template>
  <div style="margin-top: 100px">
    <el-row>
      <el-col :span="12">
        <el-button type="success" @click="changeDialogShow = true">修改登录密码</el-button>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" @click="changeDialogShow1 = true">修改支付密码</el-button>
      </el-col>
    </el-row>
  </div>
  <!-- 修改登录密码对话框开始 -->
  <el-dialog v-model="changeDialogShow" title="请谨慎修改登录密码" width="500">
    <el-form>
      <div class="form-column">
        <el-form-item label="原密码" label-width="20%">
          <el-input type="password" v-model="changePassword.oldPwd" autocomplete="off" placeholder="请输入原密码"/>
        </el-form-item>
        <el-form-item label="新密码" label-width="20%">
          <el-input type="password" v-model="changePassword.newPwd" autocomplete="off" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认密码" label-width="20%">
          <el-input type="password" v-model="changePassword.newPwd1" autocomplete="off" placeholder="请确认密码"/>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeDialogShow=false">取消</el-button>
        <el-button type="primary" @click="change">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改登录密码对话框结束 -->
  <!-- 修改支付密码对话框开始 -->
  <el-dialog v-model="changeDialogShow1" title="请谨慎修改支付密码" width="500">
    <el-form>
      <div class="form-column">
        <el-form-item label="原密码" label-width="20%">
          <el-input type="password" v-model="changePassword.oldPwd" autocomplete="off" placeholder="请输入原密码"/>
        </el-form-item>
        <el-form-item label="新密码" label-width="20%">
          <el-input type="password" v-model="changePassword.newPwd" autocomplete="off" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认密码" label-width="20%">
          <el-input type="password" v-model="changePassword.newPwd1" autocomplete="off" placeholder="请确认密码"/>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="changeDialogShow1=false">取消</el-button>
        <el-button type="primary" @click="change1">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改支付密码对话框结束 -->
</template>

<script setup>
//是否显示修改密码对话框
import {ref} from "vue";
import {ElLoading, ElMessage, ElNotification} from "element-plus";
import userApi from "@/api/userApi.js";
import {useTokenStore} from '@/stores/token.js';
import {useUserStore} from '@/stores/user.js';

const tokenStore = useTokenStore();//使用store
const userStore=useUserStore()
const changeDialogShow = ref(false)//是否显示修改登录密码对话框
const changeDialogShow1 = ref(false)//是否显示修改支付密码对话框
const changePassword = ref({
  oldPwd: null,
  newPwd: null,
  newPwd1: null,
})
//确认修改登录密码
function change() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.5)',
  })
  userApi.changePwd(changePassword.value)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          changeDialogShow.value=false
          changePassword.value=ref({})
          //弹出消息
          ElMessage.success(resp.msg)
          //重置token并退出
          //logout()
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
      })
}
//确认修改支付密码
function change1() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.5)',
  })
  userApi.changePwd1(changePassword.value)
      .then(resp => {
        loading.close()
        //判断---弹出消息--刷新表格
        if (resp.code === 10000) {
          changeDialogShow1.value=false
          changePassword.value=ref({})
          //弹出消息
          ElMessage.success(resp.msg)
          //重置token并退出
          //logout()
        } else {
          //弹出消息
          ElMessage.error(resp.msg)
        }
      })
}
//退出
function logout() {
  //删除store中的token
  tokenStore.$reset();
  userStore.$reset();
  //编程式导航
  router.push('/user/index');
  ElNotification({
    title: 'Success',
    message: '退出成功~~~',
    type: 'success',
  });
}
</script>

<style scoped>

</style>